<template>
  <div class="dd-login-container">
    <template v-if="isInDingTalk">
      <el-button type="primary" @click="onClickAuto">授权登录</el-button>
      <el-button v-if="isIpad && !hadLand" plain @click="onClickChange">启动全屏</el-button>
    </template>
    <div v-else>
      <div v-if="showTitle" class="login-title">
        <el-tooltip popper-class="login-tooltip" effect="dark" content="账号登录" placement="right">
          <img :src="loginErcode" alt="" @click="$emit('tapLoginTap')">
        </el-tooltip>
      </div>
      <div class="login-tab-center">
        <el-tabs v-model="loginActive" class="login-tab">
          <el-tab-pane label="飞书扫码登录" name="feishu">
            <span slot="label" class="tab-title">飞书扫码登录</span>
            <div class="flex-container">
              <div class="feishu-code-container">
                <div :id="feishuQrcodeId || 'login_feishu_code_container'"/>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="钉钉扫码登录" name="dingding">
            <span slot="label" class="tab-title">钉钉扫码登录</span>
            <div class="flex-container">
              <div class="feishu-code-container" style="margin-bottom: 32px;">
                <div :id="ddQrcodeId || 'login_dd_code_container'"/>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="loginActive === 'feishu'" class="tip">请用飞书扫码或点击授权登录</div>
      <transition :appear="true" name="fade">
        <el-button v-if="loginActive === 'feishu'" type="primary" class="auth-btn" @click="authLogin">授权登录</el-button>
      </transition>
    </div>
  </div>
</template>
<script>
// import ddLogin from '@/mixin/ddLogin';
import { isIpad } from '@/utils/tools';
import loginForm from './loginForm';
import ListTab from '@/components/ListTab';
// img
import loginErcode from '@/assets/login_form.png';
export default {
  name: 'DingTalkLogin',
  components: { loginForm, ListTab },
  props: {
    showTitle: {
      type: Boolean,
      default: false
    },
    isInDingTalk: {
      type: Boolean,
      default: false
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    feishuQrcodeId: {
      type: String,
      default: ''
    },
    ddQrcodeId: {
      type: String,
      default: ''
    }
  },
  // mixins: [ddLogin],
  data() {
    return {
      isIpad: isIpad(),
      hadLand: false,
      loginErcode,
      loginActive: 'feishu',
      loginType: 'tab-code', // 0-手机号登录，1-钉钉二维码登录，2-钉钉自动登录(扫码后或应用内自动登录)
      loading: false,
      redirect: undefined,
      loginError: false
    };
  },
  mounted() {
    const query = new URLSearchParams(location.search || '?');
    const orientation = query.get('dd_orientation');
    if (orientation && orientation === 'landscape') this.hadLand = true;
  },
  methods: {
    onClickAuto() {
      this.$emit('onTapAuto');
    },
    onClickChange() {
      location.href = '/?dd_nav_bgcolor=FF000000&showmenu=false&dd_orientation=landscape';
    },
    authLogin() {
      location.href = `${location.origin}?isFeishu=1`;
    }
  }
};
</script>
<style lang="scss" scoped>
.tab-title {
  font-size: 16px;
  line-height: 32px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  color: #666666;
  line-height: 26px;
}
.tip {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #999999;
  line-height: 25px;
  margin: 8.5px 0 21px;
}
.auth-btn {
  width: 316px !important;
  font-size: 16px;
  margin-bottom: 32px;
}
.login-tab-center {
  display: flex;
  justify-content: center;
  ::v-deep .el-tabs__nav-wrap::after {
    display: none;
  }
}
.feishu-code-container {
  border: 1px solid #AEB6C7;
  border-radius: 12px;
  width: 260px;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.flex-container {
  display: flex;
  justify-content: center;
}
.login-tab {
  width: 320px;
  margin-top: 28px;
  &::v-deep {
    .el-tabs__active-bar {
      width: 100px !important;
    }
    .tab-title {
      font-weight: bold;
    }
    .el-tabs__item.is-active {
      .tab-title {
        color: #406EFF;
      }
    }
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: flex-start;
    }
    .el-tabs__header {
      margin: 0;
    }
  }
}

  .dd-login-container {
    text-align: center;
    // margin-top: 40px;
    border-radius: 16px;
    box-shadow: 0px 4px 16px 0px #dde1ea;
    height: 487px;
  }
  .login-title {
    margin-top: 40px;
    margin-bottom: 50px;
    font-size: 2rem;
    font-family:PingFangSC-Semibold,PingFang SC;
    font-weight:600;
    color:rgba(51,51,51,1);
    position: absolute;
    top: -38px;
    right: -33px;
    img {
      width: 50px;
      height: 50px;
      position: absolute;
      right: 32px;
      top: -3px;
      cursor: pointer;
    }
  }
.fade-enter-active, .fade-leave-active {
  transition: all .6s ease-out;
}
.fade-enter-to, .fade-leave-to {
  transition: all .6s ease-out;
}
</style>
<style lang="scss">
.login_qrcode_text span{
  color: #406EFF !important;
}
</style>
